import { vh, vw } from "@/common/dimensions";
import React, { ReactNode } from "react";
import {
	GestureResponderEvent,
	Modal,
	StyleSheet,
	View,
	Text,
    Pressable,
} from "react-native";

export interface BottomModalPropsType {
	handleLeftButton?: (event?: GestureResponderEvent) => void;
	handleRightButton?: (event: GestureResponderEvent) => void;
	hideModal?: () => void;
	children: ReactNode;
}

const createBottomModal = (props: BottomModalPropsType) => {
	const { handleLeftButton, handleRightButton, hideModal, children } = props;
	return <View style={styles.modalContainer}>{children}</View>;
};

export default function BottomModal(props: {
	bottomModalVisible: boolean;
	bottomModalProps: BottomModalPropsType;
}) {
	const { bottomModalVisible, bottomModalProps } = props;
	return (
		<Modal
			visible={bottomModalVisible}
			transparent={true}
			animationType="slide"
		>
			<Pressable style={styles.overlay} onPress={bottomModalProps.hideModal}/>
            {createBottomModal(bottomModalProps)}
		</Modal>
	);
}
const styles = StyleSheet.create({
	overlay: {
		flex: 1,
		justifyContent: "center",
		alignItems: "center",
		backgroundColor: "rgba(0, 0, 0, 0.2)", // 半透明背景
	},
	modalContainer: {
		width: 100 * vw,
		maxHeight: 75 * vh,
		minHeight:60*vh ,
		position: "absolute",
		bottom: 0,
		left: 0,
		paddingTop: 24,
		paddingHorizontal: 2 * vw ,
		backgroundColor: "white",
		borderRadius: 16,
		elevation: 5,
	},
});
